<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>手风琴切换</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      #wrap {
        width: 815px;
        height: 473px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
      }

      .item {
        float: left;
        height: 100%;
        overflow: hidden;
      }

      .nav {
        float: left;
        width: 108px;
        height: 100%;
        background: url(../img/avatar.png) center center/cover no-repeat;
      }

      .icon {
        float: left;
        width: 0px;
        height: 100%;
        background: url(../img/defaultInteriorBackgroundBanner.jpg) left
          center/380px auto no-repeat;
        transition: width 0.5s ease-out;
      }

      .active {
        width: 380px;
        transition: width 0.5s ease-out;
      }
    </style>
  </head>
  <body>
    <ul id="wrap">
      <li class="item">
        <div class="nav"></div>
        <div class="icon"></div>
      </li>
      <li class="item">
        <div class="nav"></div>
        <div class="icon"></div>
      </li>
      <li class="item">
        <div class="nav"></div>
        <div class="icon"></div>
      </li>
      <li class="item">
        <div class="nav"></div>
        <div class="icon active"></div>
      </li>
    </ul>
    <script type="text/javascript">
      var navs = document.getElementsByClassName("nav");
      var icon = document.getElementsByClassName("icon");
      //初始值
      var time = null;
      function slideUP(obj) {
        var maxW = 380;
        clearInterval(time);
        time = setInterval(function () {
          maxW -= 10;
          if (maxW <= 0) {
            maxW = 0;
          }
          obj.style.width = maxW + "px";
        }, 10);
      }
      //window.getComputedStyle(obj)[attr] : 获取obj的样式
      for (var i = 0; i < navs.length; i++) {
        navs[i].index = i;
        navs[i].onclick = function () {
          for (var j = 0; j < navs.length; j++) {
            if (window.getComputedStyle(icon[j])["width"] == 380) {
              slideUP(icon[j]);
            }
          }
          for (var j = 0; j < navs.length; j++) {
            icon[j].className = "icon";
          }
          icon[this.index].className = "icon active";
        };
      }
    </script>
  </body>
</html>
